<template>
    <div class="manage">
        <div class="manage-header">
            <el-button v-if="params.canAdd" type="primary" @click="add" size="small">新建拍摄</el-button>
            <el-form v-if="params.canQuery" :model="searchForm" :inline="true" label-width="90px">
                <el-form-item>
                    <el-radio-group v-model="searchForm.status" size="small" @input="getList">
                        <el-radio-button label="">全部</el-radio-button>
                        <el-radio-button v-for="(val, key) in statusMap" :key="key" :label="key">{{ val }}</el-radio-button>
                    </el-radio-group>
                </el-form-item>

                <el-form-item>
                    <el-input v-model="searchForm.name" clearable size="small" placeholder="支持标题模糊匹配">
                        <el-button slot="append" style="color: #666666;" type="primary" size="small" @click="onSubmit">搜索</el-button>
                    </el-input>
                </el-form-item>
            </el-form>
        </div>

        <div class="common-table">
            <el-card v-for="(item, key) in tableData" :key="key" :body-style="{ padding: '0px' }" shadow="never">
                <el-dropdown v-if="item.can_update || item.can_delete" @command="handleCommand">
                    <span class="el-dropdown-link">
                        <i class="el-icon-more"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-if="item.can_update" :command="{command: 'edit', row: item}">编辑</el-dropdown-item>
                        <el-dropdown-item v-if="item.can_delete" :command="{command: 'delete', row: item}">删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>

                <el-image
                    :src="item.cover_url"
                    fit="cover"
                    @click="handleCommand({command: 'edit', row: item})"
                    class="image">
                </el-image>

                <div style="padding: 10px;">
                    <span style="font-size: 14px;color: #333333;">{{ item.title }}</span>
                    <div class="bottom">
                        时间：<time class="time">{{ item.date.substr(0, 16) }}</time>
                    </div>
                    <div class="bottom viewers">
                        <div class="bottom-left">
                            <img v-for="user in item.users" :key="user.id" :src="user.avatar" alt="">
                        </div>
                        <div class="bottom-right" style="font-size: 14px;color: #333333;">
                            <el-tag size="mini">{{ statusMap[item.status] }}</el-tag>
                        </div>
                    </div>
                </div>
            </el-card>

            <div class="pager">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    @current-change = "pageChanged"
                    :page-size="pageData.limit"
                    :current-page="pageData.page"
                    :total="total">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script>

import { getInit, getPlanList, deletePlan } from "@/api/plan"

export default {
    data() {
        return {
            dialogVisible: false,
            menuDialogVisible: false,
            type: 0,
            form: {
                id: '',
                name: '',
                label: '',
                description: ''
            },
            statusMap: {
                "1": "未开始",
                "2": "拍摄中",
                "3": "待返片",
                "4": "精修中",
                "5": "已完成",
            },
            params: {
                users: {},
                canQuery: false,
                canAdd: false
            },
            searchForm: {
                name: '',
                status: '',
            },
            tableData: [],
            total: 0,
            pageData: {
                page: 1,
                limit: 10
            }
        }
    },
    created() {
        this.getInit()
        this.getList()
    },
    methods: {
        getInit() {
            getInit().then(({ data }) => {
                this.params = data.data
                console.log(this.params)
            })
        },
        getList() {
            getPlanList({params: {...this.pageData, ...this.searchForm}}).then(({ data }) => {
                console.log(data)
                this.tableData = data.data
                this.total = data.meta.total || 0
            })
        },
        add() {
            this.$router.push({name: 'photos.add'})
        },
        handleDelete(row) {
            this.$confirm('确认要删除该拍摄吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deletePlan(row.id).then(({ data }) => {
                    // console.log(data)
                    if (data.code === 200) {
                        this.$message.success(data.data)
                    } else {
                        this.$message.error(data.data)
                    }
                    this.getList()
                })
            }).catch(() => {

            })
        },
        handleCommand(data) {
            const {command, row} = data
            switch (command) {
                case 'edit':
                    this.$router.push({name: 'photos.add', query: {id: row.id}})
                    break;

                case 'delete':
                    this.handleDelete(row)
                    break;
            }
        },
        onSubmit() {
            this.pageData.page = 1
            this.getList()
        },
        pageChanged(val) {
            this.pageData.page = val
            this.getList()
        }
    }
}
</script>

<style lang="less" scoped>
.manage {
    height: 90%;

    .manage-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;

        .el-button {
            font-weight: normal;
        }

        .el-form {
            display: flex;
            align-items: center;

            .el-form-item {
                margin-bottom: 0;

                /deep/.el-form-item__content {
                    display: flex;

                    .el-radio-button__inner {
                        font-weight: normal;
                    }
                }
            }
        }
    }

    .common-table {
        height: calc(100% - 62px);
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        position: relative;

        .el-card {
            width: 260px;
            height: 236px;
            border: 1px solid #eeeeee;
            margin-bottom: 20px;
            margin-right: 29px;
            position: relative;

            .el-card__body {

                .el-dropdown {
                    position: absolute;
                    right: 0;
                    top: 0;
                    z-index: 1;

                    .el-icon-more {
                        font-size: 25px;
                        color: green;
                        margin: 0 10px 0 0;
                        cursor: pointer;
                    }
                }
            }

            .image {
                width: 100%;
                height: 130px;
                cursor: pointer;
            }

            div {
                .bottom {
                    color: #666;
                    font-size: 14px;
                    padding: 2px 0;
                }
                .viewers {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-top: 0;

                    div {
                        img {
                            &:first-child {
                                margin-left: 0;
                            }
                            width: 28px;
                            height: 28px;
                            border-radius: 50%;
                            margin-top: 5px;
                            margin-left: -10px;
                        }
                    }
                }
            }
        }

        .pager {
            position: absolute;
            bottom: 0;
            right: 20px;
        }
    }
}
</style>
